<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>考勤数据查询</title>
    <script src="../public/libs/vue.js"></script>
    <!--引入element组件库-->
    <script src="../public/plugins/element-ui/lib/index.js"></script>
    <script src="../public/plugins/axios/dist/axios.js"></script>
    <script src="../public/libs/JsonExportExcel.min.js"></script>
    <!-- 引入element样式 -->
    <link href="../public/plugins/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body style="overflow:scroll;overflow-x: hidden;">
    <div id="myVue">
        <div>
            <el-row justify="center" type="flex">
                <el-col :span="6">
                    <span>开始日期：</span>
                    <el-date-picker v-model="startDate" type="date" size="mini" placeholder="开始日期" format="yyyy-MM-dd"
                        style="display: inline-block;width: 60%;">
                    </el-date-picker>
                </el-col>

                <el-col :span="6">
                    <span>结束日期：</span>
                    <el-date-picker v-model="endDate" type="date" size="mini" placeholder="结束日期" format="yyyy-MM-dd"
                        style="display: inline-block;width: 60%;">
                    </el-date-picker>
                </el-col>
                <el-col :span="6">
                    <span>员工姓名：</span>
                    <el-input size="mini" style="display: inline-block;width: 60%;" type="text" v-model="name">
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button @click="queryCA" icon="el-icon-search" size="mini" type="primary">考勤查询
                    </el-button>
                    <el-button @click="jsonToExcel" icon="el-icon-phone-outline" size="mini" type="success">结果导出
                    </el-button>

                </el-col>
            </el-row>
            <el-row>
                <el-clo>
                    <el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch"
                        placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </el-clo>

            </el-row>
        </div>
        <div style="overflow:auto;width:100%;">
            <el-row>
                <el-table :data="lstCheckAttendance.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :header-cell-style="{'text-align':'center','font-size':'14px',color:'#000000'}" :show-header="true"
                    :show-summary="true" @selection-change="handleSelectionChange" @sort-change='sort_change' border
                    ref="lstCheckAttendance" size="mini" style="background-color: bisque;width:100%;">
                    <el-table-column align="center" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column :label="col.propName" :prop="col.prop" min-width="5%" sortable="custom"
                        :width="columnWidth(col.prop)" v-for="col in colTitle"></el-table-column>
                </el-table>
                <!-- <el-table-column prop="PNO" label="零件图号"></el-table-column> -->

            </el-row>
            <el-row justify="center" type="flex">
                <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50, 500]"
                    :total="lstCheckAttendance.length" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </el-row>
        </div>
        <div style="width: 100%; height:100%; background: url(../img/loading7.gif) no-repeat;
					background-size: 150px 150px;position:relative;  top: 50%;  left: 45%;" v-show="dataLoading">
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#myVue',
            data: {
                name: '',
                startDate: '',
                endDate: '',
                lstCheckAttendance: [],//考勤和汇总结果记录集
                colTitle: [{ prop: "name", propName: "姓名" }, { prop: "department", propName: "部门" },
                { prop: "classify", propName: "分类" }, { prop: "checkDate", propName: "日期" },
                { prop: "weekDay", propName: "星期" }, { prop: "allTime", propName: "全部记录" },
                { prop: "caHour", propName: "出勤" }, { prop: "overHour", propName: "加班" },
                { prop: "needCheck", propName: "需核对" }, { prop: "notAttendance", propName: "缺勤" }],
                inputTest: '',
                allInfos: [{ 'value': 'asdfasd' }, { 'value': 'eddas' }, { 'value': 'ffes' },
                { 'value': 'badsa' }],
                inputValue: '',
                //late,earlier,less,,
                currentPage: 1,// 当前页
                pageSize: 10,// 每页多少条
                proptype: "",//存放column.prop的字符串值
                dataLoading: false,
                lstItem: [],//带勾选的多行表格，选中记录
                selectedNum: 0,//选中记录数
            },

            mounted: function () {
                let d = new Date();
                let m = d.getMonth();
                let y = d.getFullYear();
                if (m == 1) {
                    y = y - 1;
                    m = 13;
                }
                this.endDate = new Date(y, m, 0).toLocaleDateString();
                this.startDate = new Date(y, m - 1, 1).toLocaleDateString();

            },
            methods: {
                querySearch(queryString, cb) {
                    let results = this.allInfos;
                    results = queryString ? results.filter(this.createFilter(queryString)) : results;
                    //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
                    cb(results);
                },
                createFilter(queryString) {
                    return (item) => {
                        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },
                handleSelect(item) {
                    this.inputValue = item.value;
                },
                handleNodeClick(data) {
                    console.log(data);
                },
                queryCA: function () {
                    let that = this;
                    this.dataLoading = true;
                    axios({
                        method: 'post',
                        url: '/checkAttendance/list',
                        data: { startDate: this.startDate, endDate: this.endDate, name: this.name }
                        // headers:{"Content-Type":"multipart/form-data"}
                    }).then(rsp => {
                        let resp = rsp.data;
                        if (resp.code == 200) {
                            that.dataLoading = false;
                            that.lstCheckAttendance = resp.lstCheckAttendance;
                        }
                    }).catch(error => {
                    });
                    return false;

                },
                columnWidth(item) {
                    let widthStr = ''
                    // if(item)

                    switch (item) {
                        case 'department':
                            widthStr = '150';
                            break;
                        case 'allTime':
                            widthStr = '150';
                            break;
                        case 'checkDate':
                            widthStr = '100';
                            break;
                        default:

                    }
                    console.log(widthStr);
                    return widthStr
                },

                handleSelectionChange: function (selection) {
                    //获取所有选中项的itemcode属性的值
                    this.lstItem = selection.map(item => item.ItemCode);

                    //获取所有选中项数组的长度
                    this.selectedNum = selection.length
                },
                showItemCode: function () {
                    alert(JSON.stringify(this.lstItem));
                },

                // 每页多少条
                handleSizeChange: function (val) {
                    this.pageSize = val;
                },
                // 当前页
                handleCurrentChange: function (val) {
                    this.currentPage = val;
                },

                //若采用相同排序方法可简写：
                sort_change(column) {
                    this.currentPage = 1; // 排序后返回第一页
                    this.proptype = column.prop; // 将键名prop赋值给变量proptype
                    if (column.order === "descending") {
                        this.lstCheckAttendance.sort(this.my_desc_sort);

                    } else if (column.order === "ascending") {
                        this.lstCheckAttendance.sort(this.my_asc_sort);
                    }

                },
                //排序方法
                my_desc_sort(a, b) {
                    if (typeof (a[this.proptype]) == "string")
                        return b[this.proptype].localeCompare(a[this.proptype]);
                    else if (typeof (a[this.proptype]) == "number")
                        return b[this.proptype] - a[this.proptype]; // a["time"] 等价于 a.time
                },
                my_asc_sort(a, b) {
                    if (typeof (a[this.proptype]) == "string")
                        return a[this.proptype].localeCompare(b[this.proptype]);
                    else if (typeof (a[this.proptype]) == "number")
                        return a[this.proptype] - b[this.proptype]; // a["time"] 等价于 a.time
                },
                jsonToExcel: function () {
                    let jsonList = this.lstCheckAttendance;
                    let arr = [];
                    let datas = [];
                    //this.titleData.forEach(function(item){ arr.push(item.propName) ;  	})
                    arr = Object.keys(jsonList[0]);
                    arr = ['姓名', '部门', '岗位', '日期', '星期', '全部记录', '出勤', '加班', '迟到', '早退', '缺打卡', '需核对', '缺勤'];
                    let option = {};
                    option.fileName = "考勤结果查询" + new Date().getFullYear();
                    datas.push({ sheetData: jsonList, sheetHeader: arr });
                    option.datas = datas;
                    let toExcel = new ExportJsonExcel(option);
                    toExcel.saveExcel();
                }


            }
        })

    </script>
    <style>
        #box {
            display: flex;

            border: 1px solid #0000FF;
            background: rgb(210, 217, 221);
            height: 300px;
            width: 30%;
            flex-direction: column;
            justify-content: center;
        }

        .item {
            width: 100%;
            height: 60px;
            border: 0px;
        }

        .el-tree-node:focus>.el-tree-node__content {
            background-color: #FFA500 / / 背景色
        }

        /*
    .el-tree-node__content :hover {
        background: #fff;
    }
    */

        .el-tree-node__label {
            width: auto;
            margin-top: 12px;
            float: right;
            font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #0e2ee0;
            line-height: 25px;
            letter-spacing: 1px;
        }

        .tree .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        .tree .el-icon-caret-right:before {
            content: "\e722";
            font-size: 18px;
        }

        .tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
            content: "\e723";
            font-size: 18px;
        }

        .el-tree {
            color: #fff;
            background: transparent;

        }

        .el-tabs__item {
            padding: 0 20px;
            height: 40px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 40px;
            display: inline-block;
            list-style: none;
            font-size: 18px;
            font-weight: 500;
            color: #FFA500;
            position: relative;
        }

        .el-tabs__content {
            height: calc(100% - 40px);
        }

        .el-tabs--card>.el-tabs__header {
            border-bottom: 1px solid #E4E7ED;
            background-color: gainsboro;
        }

        .el-tabs__item.is-active {
            color: #00BFFF;
        }

        .el-tabs__item:hover {
            color: #00BFFF;
            cursor: pointer;
        }

        .el-table {
            width: 99.9% !important;
        }

        .el-row {
            margin-bottom: 10px;

        }

        el-row:last-child {
            margin-bottom: 0;
        }

        .el-col {
            border-radius: 4px;
        }

        el-input {
            display: inline-block;
            width: 50%;
        }
    </style>
</body>

</html>